<template>
  <div>

    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->

        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{edit?"修改":"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>


        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :edit="edit"></my-brand-form>

        </v-card-text>
      </v-card>
    </v-dialog>

    <v-card>
      <v-card-title>
        <v-btn color="success" @click="addBrand">
              新增品牌
        </v-btn>
        <!--空间隔离组件-->
        <v-spacer/>
        <v-flex xs12 sm6 md3>
          <v-text-field label="搜索商品" v-model="key"></v-text-field>
        </v-flex>

      </v-card-title>
      <!--分割线-->
      <v-divider/>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">

        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center">
          <v-btn color="info" @click="editBrand(props.item)">
            编辑
          </v-btn>
          <v-btn color="error" @click="deleteBrand(props.item)">
            删除
          </v-btn>
        </td>

      </template>
    </v-data-table>
    </v-card>
  </div>
</template>

<script>
  import myBrandForm from './MyBrandForm'
  export default {
    data() {
      return {
        totalBrands: 0,
        brands: [],
        loading: true,
        pagination: {},
        headers: [
          {text: 'id', align: 'center', sortable: true, value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', value: 'id', sortable: false}

        ],
        key: "",
        show: false,
        edit: false,
        oldBrand: {}
      };
    },
    mounted() {
      this.getDataFromServer()

    },
    methods: {
      getDataFromServer() { // 从服务的加载数据的方法。
        //发起请求
        this.$http.get("/item/brand/page", {
          params: {
            key: this.key,//搜索条件
            page: this.pagination.page,//当前页
            rows: this.pagination.rowsPerPage === -1 ? this.totalBrands : this.pagination.rowsPerPage,//每页大小
            sortBy: this.pagination.sortBy,//排序字段
            desc: this.pagination.descending//是否降序

          }

        }).then(({data}) => {
          //将得到的数据复制给本地属性
          this.brands = data.items;
          this.totalBrands = data.total;
          //完成赋值后,把加载状态赋值为false
          this.loading = false
        }).catch(response => {
          console.log("axios请求失败");
          console.log(response)
        })
      },
      addBrand() {
        this.show = true;
        this.edit = false;

        this.oldBrand = null
      },
      closeWindow() {
        this.show = false;
        this.getDataFromServer()
        //TODO 把关闭窗口优化一下,关闭时不刷新页面,减少资源
      },
      editBrand(oldBrand) {
        // 根据品牌信息查询商品分类
        this.$http.get("/item/category/bid/" + oldBrand.id)
          .then(({data}) => {

            // 回显商品分类
            oldBrand.categories = data;
            // 控制弹窗可见：
            this.show = true;
            // 获取要编辑的brand
            this.edit = true;
            this.oldBrand = oldBrand
          })
      },
      deleteBrand(oldBrand) {
        this.$message.confirm("确认要删除商品吗？")
          .then(() => {
            this.$http.delete("/item/brand/bid/" + oldBrand.id)
              .then(() => {
                this.$message.success("删除成功");
                this.getDataFromServer()

              })

          })

      }
    },
      watch: {
        pagination: {//监听pagination属性的变化
          deep: true,//deep为true,会监听pagination的属性以及属性中对象属性的变化
          handler() {
            //变化后的回调函数,这里我们在调用getDataFromServer即可
            this.getDataFromServer();
          }
        }
        },
        key: {//监听搜索字段
          handler() {
            this.getDataFromServer();
          }

        },
        components: {
          myBrandForm
        }


  }
</script>

<style scoped>

</style>
